<template>
	<view class="container">
		<view class="introduce-section">
			<view class="image">
				<image :src="good.image" mode="aspectFill"></image>
			</view>
			<view class="title-name" style="font-size: 28px;font-weight: 600;color: #fa436a;">{{good.name}}</view>
			<view class="price-box">
				<text class="price-tip">价格￥</text>
				<text class="price">{{good.price}}元</text>
			</view>
			<view class="bot-row">
				<text>销量：{{Math.floor(Math.random()*10000)}}</text>
				<text>库存：{{Math.floor(Math.random()*10000)}}</text>
				<text>浏览量：{{Math.floor(Math.random()*10000)}}</text>
			</view>
			<view class="title-remark">商品介绍：</view>
			<text class="title-remark-tap">{{good.remark}}</text>
		</view>
		<!-- 中间部分 -促销活动 -->
		<view class="c-row b-b">
			<text class="tit">促销活动</text>
			<view class="con-list">
				<text>新人首单送20元无门槛代金券</text>
				<text>订单满300减20</text>
				<text>订单满500减50元</text>
				<text>单笔购买满两件免邮费</text>
			</view>
		</view>
		<!-- 中间部分 -服务 -->
		<view class="c-row b-b">
			<text class="tit">服务</text>
			<view class="bz-list con">
				<text>7天无理由退货 ·</text>
				<text>假一赔十 · </text>
			</view>
		</view>
		<!-- 评价 -->
		<view class="eva-section">
			<view class="e-header">
				<van-cell is-link value="好评率 100%">
					<view slot="title">
						<view class="van-cell-text">评价(68)</view>
					</view>
				</van-cell>
			</view>
			<view class="eva-box">
				<view class="right">
					<text class="name">张三</text>
					<text class="con">商品收到了，379元一件，口感绝佳：果肉质地绵密细腻，入口软糯顺滑，似在舌尖上轻柔舞动。
						咬下瞬间，丰富口感纷至沓来，有的品种如金枕榴莲，甜度颇高，馥郁香甜在口腔弥漫，恰似蜜饯融化
						；而像猫山王榴莲，甜味中巧妙融合一丝苦味，苦甜交织，层次感满满，滋味悠长，越品越觉韵味无穷，为味蕾带来奢华享受。</text>
					<view class="bot">
						<text class="attr">购买类型：水果 榴莲</text>
						<text class="time">2019-04-01 19:21</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部的添加购物车组件 -->
		<view class="goods-carts">
			<uni-goods-nav @click="onClick" @buttonClick='btnClick' />
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	//商品信息
	const id = ref(null)
	const good = ref({})

	onLoad((data) => {
		//商品信息
		goodsInformation(data.id);
		id.value = data.id
	})
	
	const onClick = async ()=>{
		await uni.$get('/cart/add?gid='+id.value+'&count=1')
		uni.showToast({
			title: '添加成功'
		});
	}
	
	const btnClick = onClick

	//商品介绍
	async function goodsInformation(id) {
		//把数值赋值给goodsInf商品信息介绍
		const data = await uni.$get('/good/get?id=' + id)
		good.value = data.data
		console.log(good.value);
	}
</script>

<style>
	page {
		background: #f8f8f8;
		padding-bottom: 160rpx;
	}

	.container {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.image {
		height: 750upx;
		overflow: hidden;
	}

	.image>image {
		width: 100%;
		height: 100%;
	}

	/* 商品介绍 */
	.introduce-section {
		background: #ffffff;
		padding: 20rpx 30rpx;
	}

	.introduce-section .title {
		font-size: 32rpx;
		color: #303133;
		height: 50rpx;
		line-height: 50rpx;
	}

	.introduce-section .price-box {
		display: flex;
		align-items: baseline;
		height: 50rpx;
		padding: 10rpx 0;
		font-size: 26rpx;
		color: #fa436a;
	}

	.introduce-section .price {
		font-size: 34rpx;
	}


	.introduce-section .coupon-tip {
		align-items: center;
		padding: 4rpx 10rpx;
		background: #fa436a;
		font-size: 24rpx;
		color: #ffffff;
		border-radius: 6rpx;
		line-height: 1;
		transform: translateY(-4rpx);
	}

	.introduce-section .bot-row {
		display: flex;
		align-items: center;
		height: 30rpx;
		font-size: 24rpx;
		color: #909399;
	}

	.introduce-section .bot-row text {
		flex: 1;
	}

	.c-row {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
		font-size: 26rpx;
		color: #606266;
		background-color: #FFFFFF;
	}

	.c-row .tit {
		width: 23%;
	}

	.c-row .con-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: #303133;
		line-height: 40rpx;
	}

	.c-row .bz-list {
		height: 40rpx;
		font-size: 26rpx;
		color: #303133;
	}

	.c-row .con {
		flex: 1;
	}

	.c-row .bz-list text {
		display: inline-block;
		margin-right: 30rpx;
	}

	.eva-section {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		margin-top: 16rpx;
	}

	.eva-section .eva-box {
		display: flex;
		padding: 20rpx 32rpx;
	}


	.eva-box .right {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		color: #606266;
		padding-left: 26rpx;
	}

	.eva-box .right .con {
		font-size: 28rpx;
		color: #303133;
		padding: 20rpx 0;
	}

	.eva-box .right .bot {
		font-size: 24rpx;
		display: flex;
		color: #909399;
	}

	/* <添加购车>导航栏定位在浏览器窗口的底部 */
	.goods-carts {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.title-remark-tap {
		height: 30rpx;
		font-size: 26rpx;
		color: #909399;
	}

	.title-remark {
		color: #fa436a;
	}
</style>